<template>
  <div class="chat-page">
    <!-- 聊天头部 -->
    <div class="chat-header">
      <div class="header-left">
        <Button
          type="text"
          icon="arrow-left"
          @click="goBack"
          class="back-button"
        >
          返回
        </Button>

        <div class="persona-info">
          <div class="persona-avatar">
            <img
              :src="currentPersona?.avatar || '/images/default-avatar.png'"
              :alt="currentPersona?.name || 'AI助手'"
              class="avatar-image"
            />
            <div class="status-indicator" :class="{ online: isOnline }">
              <div class="status-dot"></div>
            </div>
          </div>

          <div class="persona-details">
            <h3 class="persona-name">{{ currentPersona?.name || "AI助手" }}</h3>
            <p class="persona-status">
              <span v-if="isTyping" class="typing-indicator">
                <Icon name="more-horizontal" :size="12" class="typing-dots" />
                正在输入...
              </span>
              <span v-else-if="isOnline" class="online-status">在线</span>
              <span v-else class="offline-status">离线</span>
            </p>
          </div>
        </div>
      </div>

      <div class="header-right">
        <Button
          type="text"
          icon="user"
          @click="showPersonaSelector = true"
          title="切换人格"
        />

        <Button
          type="text"
          icon="settings"
          @click="showChatSettings = true"
          title="聊天设置"
        />

        <Button
          type="text"
          icon="more-vertical"
          @click="showMoreMenu = !showMoreMenu"
          title="更多选项"
        />

        <!-- 更多菜单 -->
        <div
          v-if="showMoreMenu"
          class="more-menu"
          v-click-outside="() => (showMoreMenu = false)"
        >
          <div class="menu-item" @click="clearChat">
            <Icon name="trash" :size="14" />
            <span>清空对话</span>
          </div>
          <div class="menu-item" @click="exportChat">
            <Icon name="download" :size="14" />
            <span>导出对话</span>
          </div>
          <div class="menu-item" @click="shareChat">
            <Icon name="share" :size="14" />
            <span>分享对话</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 聊天容器 -->
    <div class="chat-container">
      <ChatContainer
        :messages="messages"
        :loading="loading"
        :persona="currentPersona"
        @scroll-to-bottom="scrollToBottom"
        @retry-message="retryMessage"
        @delete-message="deleteMessage"
        @copy-message="copyMessage"
      />
    </div>

    <!-- 聊天输入 -->
    <div class="chat-input-container">
      <ChatInput
        v-model="inputMessage"
        :disabled="loading || !currentPersona"
        :placeholder="getInputPlaceholder()"
        :max-length="maxInputLength"
        @send="sendMessage"
        @voice-input="handleVoiceInput"
        @file-upload="handleFileUpload"
        @emoji-select="handleEmojiSelect"
      />
    </div>

    <!-- 快速回复建议 -->
    <div v-if="quickReplies.length > 0" class="quick-replies">
      <div class="quick-replies-header">
        <span class="quick-replies-title">快速回复</span>
        <Button type="text" icon="x" size="small" @click="clearQuickReplies" />
      </div>

      <div class="quick-replies-list">
        <div
          v-for="reply in quickReplies"
          :key="reply.id"
          class="quick-reply-item"
          @click="sendQuickReply(reply)"
        >
          <Icon :name="reply.icon" :size="14" />
          <span>{{ reply.text }}</span>
        </div>
      </div>
    </div>

    <!-- 人格选择器 -->
    <PersonaSelector
      v-if="showPersonaSelector"
      :visible="showPersonaSelector"
      @close="showPersonaSelector = false"
      @select="handlePersonaSelect"
    />

    <!-- 聊天设置 -->
    <Modal
      v-if="showChatSettings"
      :visible="showChatSettings"
      title="聊天设置"
      @close="showChatSettings = false"
    >
      <div class="chat-settings">
        <div class="setting-group">
          <h4 class="setting-title">消息显示</h4>

          <div class="setting-item">
            <label class="setting-label">显示时间戳</label>
            <label class="toggle-switch">
              <input
                v-model="chatSettings.showTimestamp"
                type="checkbox"
                class="toggle-input"
              />
              <span class="toggle-slider"></span>
            </label>
          </div>

          <div class="setting-item">
            <label class="setting-label">显示头像</label>
            <label class="toggle-switch">
              <input
                v-model="chatSettings.showAvatar"
                type="checkbox"
                class="toggle-input"
              />
              <span class="toggle-slider"></span>
            </label>
          </div>
        </div>

        <div class="setting-group">
          <h4 class="setting-title">输入设置</h4>

          <div class="setting-item">
            <label class="setting-label">发送快捷键</label>
            <select v-model="chatSettings.sendShortcut" class="setting-select">
              <option value="enter">Enter</option>
              <option value="ctrl-enter">Ctrl + Enter</option>
              <option value="shift-enter">Shift + Enter</option>
            </select>
          </div>

          <div class="setting-item">
            <label class="setting-label">启用语音输入</label>
            <label class="toggle-switch">
              <input
                v-model="chatSettings.enableVoiceInput"
                type="checkbox"
                class="toggle-input"
              />
              <span class="toggle-slider"></span>
            </label>
          </div>
        </div>
      </div>
    </Modal>

    <!-- 文件上传预览 -->
    <Modal
      v-if="showFilePreview"
      :visible="showFilePreview"
      title="文件预览"
      @close="showFilePreview = false"
    >
      <div class="file-preview">
        <div v-if="previewFile" class="preview-content">
          <div
            v-if="previewFile.type.startsWith('image/')"
            class="image-preview"
          >
            <img
              :src="previewFile.url"
              :alt="previewFile.name"
              class="preview-image"
            />
          </div>

          <div v-else class="file-info">
            <Icon name="file" :size="48" class="file-icon" />
            <div class="file-details">
              <h4 class="file-name">{{ previewFile.name }}</h4>
              <p class="file-size">{{ formatFileSize(previewFile.size) }}</p>
              <p class="file-type">{{ previewFile.type }}</p>
            </div>
          </div>
        </div>

        <div class="preview-actions">
          <Button type="secondary" @click="showFilePreview = false">
            取消
          </Button>

          <Button type="primary" @click="confirmFileUpload"> 发送文件 </Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { usePersonaStore } from "@/stores/persona";
import { useChatStore } from "@/stores/chat";
import { useSettingsStore } from "@/stores/settings";
import Icon from "@/components/common/Icon.vue";
import Button from "@/components/common/Button.vue";
import Modal from "@/components/common/Modal.vue";
import ChatContainer from "@/components/chat/ChatContainer.vue";
import ChatInput from "@/components/chat/ChatInput.vue";
import PersonaSelector from "@/components/persona/PersonaSelector.vue";

interface Message {
  id: string;
  type: "user" | "ai" | "system";
  content: string;
  timestamp: Date;
  persona?: any;
  attachments?: any[];
  status?: "sending" | "sent" | "error";
}

interface QuickReply {
  id: string;
  text: string;
  icon: string;
}

interface ChatSettings {
  showTimestamp: boolean;
  showAvatar: boolean;
  sendShortcut: string;
  enableVoiceInput: boolean;
}

interface PreviewFile {
  name: string;
  size: number;
  type: string;
  url: string;
  file: File;
}

// Router
const route = useRoute();
const router = useRouter();

// Stores
const personaStore = usePersonaStore();
const chatStore = useChatStore();
const settingsStore = useSettingsStore();

// 响应式数据
const messages = ref<Message[]>([]);
const inputMessage = ref("");
const loading = ref(false);
const isTyping = ref(false);
const isOnline = ref(true);
const showPersonaSelector = ref(false);
const showChatSettings = ref(false);
const showMoreMenu = ref(false);
const showFilePreview = ref(false);
const previewFile = ref<PreviewFile | null>(null);
const maxInputLength = ref(2000);

// 快速回复
const quickReplies = ref<QuickReply[]>([]);

// 聊天设置
const chatSettings = ref<ChatSettings>({
  showTimestamp: true,
  showAvatar: true,
  sendShortcut: "enter",
  enableVoiceInput: true,
});

// 计算属性
const currentPersona = computed(() => personaStore.currentPersona);
const chatId = computed(() => route.params.id as string);

// 方法
const goBack = () => {
  router.push("/");
};

const getInputPlaceholder = (): string => {
  if (!currentPersona.value) {
    return "请先选择一个AI人格...";
  }

  const persona = currentPersona.value;
  const placeholders = {
    sakura: "和小樱聊聊天吧～",
    doctor: "请描述您的健康问题...",
    chef: "想学什么料理呢？",
    companion: "有什么想聊的吗？",
  };

  return placeholders[persona.id as keyof typeof placeholders] || "输入消息...";
};

const sendMessage = async (content: string, attachments?: any[]) => {
  if (!content.trim() && !attachments?.length) return;
  if (!currentPersona.value) {
    showPersonaSelector.value = true;
    return;
  }

  const userMessage: Message = {
    id: Date.now().toString(),
    type: "user",
    content: content.trim(),
    timestamp: new Date(),
    attachments,
    status: "sending",
  };

  messages.value.push(userMessage);
  inputMessage.value = "";
  clearQuickReplies();

  // 滚动到底部
  await nextTick();
  scrollToBottom();

  try {
    loading.value = true;
    isTyping.value = true;
    userMessage.status = "sent";

    // 模拟AI回复
    await simulateAIResponse(content, attachments);
  } catch {
    // 发送消息失败
    userMessage.status = "error";

    // 添加错误消息
    const errorMessage: Message = {
      id: Date.now().toString(),
      type: "system",
      content: "消息发送失败，请重试",
      timestamp: new Date(),
    };
    messages.value.push(errorMessage);
  } finally {
    loading.value = false;
    isTyping.value = false;
    await nextTick();
    scrollToBottom();
  }
};

const simulateAIResponse = async (userContent: string, attachments?: any[]) => {
  // 模拟网络延迟
  await new Promise((resolve) =>
    setTimeout(resolve, 1000 + Math.random() * 2000),
  );

  const persona = currentPersona.value!;
  let aiContent = "";

  // 根据人格生成不同的回复
  switch (persona.id) {
    case "sakura":
      aiContent = generateSakuraResponse(userContent);
      break;
    case "doctor":
      aiContent = generateDoctorResponse(userContent);
      break;
    case "chef":
      aiContent = generateChefResponse(userContent);
      break;
    case "companion":
      aiContent = generateCompanionResponse(userContent);
      break;
    default:
      aiContent = "我理解了您的问题，让我来帮助您。";
  }

  const aiMessage: Message = {
    id: Date.now().toString(),
    type: "ai",
    content: aiContent,
    timestamp: new Date(),
    persona: persona,
  };

  messages.value.push(aiMessage);

  // 生成快速回复建议
  generateQuickReplies(userContent, aiContent);
};

const generateSakuraResponse = (userContent: string): string => {
  const responses = [
    "哇～听起来很有趣呢！小樱也想了解更多～",
    "嗯嗯，小樱明白了！让我来帮助你吧～",
    "真的吗？小樱觉得这个想法很棒呢！",
    "小樱会努力帮助你的！一起加油吧～",
    "这让小樱想起了之前的经历呢～",
  ];
  return responses[Math.floor(Math.random() * responses.length)];
};

const generateDoctorResponse = (userContent: string): string => {
  const responses = [
    "根据您描述的症状，我建议您注意以下几点...",
    "这种情况比较常见，通常可以通过以下方式改善...",
    "从医学角度来看，您的情况需要进一步观察...",
    "建议您保持良好的生活习惯，并注意...",
    "如果症状持续，建议您及时就医检查...",
  ];
  return responses[Math.floor(Math.random() * responses.length)];
};

const generateChefResponse = (userContent: string): string => {
  const responses = [
    "这道菜的制作方法其实很简单，让我来教您...",
    "选择新鲜的食材是关键，建议您...",
    "这个搭配很有创意！我推荐您试试...",
    "从营养角度来说，这样搭配很均衡...",
    "让我分享一个小技巧，可以让这道菜更美味...",
  ];
  return responses[Math.floor(Math.random() * responses.length)];
};

const generateCompanionResponse = (userContent: string): string => {
  const responses = [
    "我能理解您的感受，这确实不容易...",
    "您愿意和我分享这些，我感到很荣幸...",
    "每个人都会遇到困难，您并不孤单...",
    "听起来您已经很努力了，为您感到骄傲...",
    "有什么需要倾诉的，我都会认真倾听...",
  ];
  return responses[Math.floor(Math.random() * responses.length)];
};

const generateQuickReplies = (userContent: string, aiContent: string) => {
  const replies: QuickReply[] = [
    { id: "1", text: "继续", icon: "arrow-right" },
    { id: "2", text: "详细说明", icon: "info" },
    { id: "3", text: "换个话题", icon: "refresh-cw" },
    { id: "4", text: "谢谢", icon: "heart" },
  ];

  quickReplies.value = replies.slice(0, 3);
};

const sendQuickReply = (reply: QuickReply) => {
  sendMessage(reply.text);
};

const clearQuickReplies = () => {
  quickReplies.value = [];
};

const handleVoiceInput = (transcript: string) => {
  inputMessage.value = transcript;
};

const handleFileUpload = (files: FileList) => {
  if (files.length === 0) return;

  const file = files[0];
  const url = URL.createObjectURL(file);

  previewFile.value = {
    name: file.name,
    size: file.size,
    type: file.type,
    url,
    file,
  };

  showFilePreview.value = true;
};

const confirmFileUpload = () => {
  if (!previewFile.value) return;

  const attachment = {
    id: Date.now().toString(),
    name: previewFile.value.name,
    size: previewFile.value.size,
    type: previewFile.value.type,
    url: previewFile.value.url,
  };

  sendMessage("", [attachment]);

  showFilePreview.value = false;
  previewFile.value = null;
};

const handleEmojiSelect = (emoji: string) => {
  inputMessage.value += emoji;
};

const scrollToBottom = () => {
  // 滚动到底部的逻辑将在ChatContainer中实现
};

const retryMessage = (messageId: string) => {
  const message = messages.value.find((m) => m.id === messageId);
  if (message && message.type === "user") {
    sendMessage(message.content, message.attachments);
  }
};

const deleteMessage = (messageId: string) => {
  const index = messages.value.findIndex((m) => m.id === messageId);
  if (index > -1) {
    messages.value.splice(index, 1);
  }
};

const copyMessage = (messageId: string) => {
  const message = messages.value.find((m) => m.id === messageId);
  if (message) {
    navigator.clipboard.writeText(message.content);
  }
};

const handlePersonaSelect = (persona: any) => {
  personaStore.switchPersona(persona.id);
  showPersonaSelector.value = false;

  // 添加系统消息
  const systemMessage: Message = {
    id: Date.now().toString(),
    type: "system",
    content: `已切换到${persona.name}人格`,
    timestamp: new Date(),
  };
  messages.value.push(systemMessage);
};

const clearChat = () => {
  if (confirm("确定要清空当前对话吗？此操作不可撤销。")) {
    messages.value = [];
    showMoreMenu.value = false;
  }
};

const exportChat = () => {
  const chatData = {
    persona: currentPersona.value,
    messages: messages.value,
    exportTime: new Date().toISOString(),
  };

  const blob = new Blob([JSON.stringify(chatData, null, 2)], {
    type: "application/json",
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = `chat-${Date.now()}.json`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);

  showMoreMenu.value = false;
};

const shareChat = () => {
  // 分享对话的逻辑
  showMoreMenu.value = false;
};

const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return "0 Bytes";

  const k = 1024;
  const sizes = ["Bytes", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));

  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};

const loadChatHistory = async () => {
  if (chatId.value) {
    try {
      const history = await chatStore.getChatHistory(chatId.value);
      messages.value = history;
    } catch {
      // 加载聊天记录失败
    }
  }
};

const saveChatHistory = async () => {
  if (chatId.value && messages.value.length > 0) {
    try {
      await chatStore.saveChatHistory(chatId.value, messages.value);
    } catch {
      // 保存聊天记录失败
    }
  }
};

// 监听器
watch(
  messages,
  () => {
    saveChatHistory();
  },
  { deep: true },
);

watch(currentPersona, (newPersona) => {
  if (newPersona) {
    // 人格切换时的处理
    clearQuickReplies();
  }
});

// 生命周期
onMounted(async () => {
  await loadChatHistory();

  // 如果没有选择人格，显示人格选择器
  if (!currentPersona.value) {
    showPersonaSelector.value = true;
  }
});

onUnmounted(() => {
  saveChatHistory();
});

// 点击外部关闭菜单的指令
const vClickOutside = {
  mounted(el: HTMLElement, binding: any) {
    el.clickOutsideEvent = (event: Event) => {
      if (!(el === event.target || el.contains(event.target as Node))) {
        binding.value();
      }
    };
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unmounted(el: HTMLElement) {
    document.removeEventListener("click", el.clickOutsideEvent);
  },
};
</script>

<style scoped>
/* 聊天页面基础样式 */
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--bg-primary);
  overflow: hidden;
}

/* 聊天头部 */
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-button {
  padding: 8px;
}

.persona-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.persona-avatar {
  position: relative;
  width: 40px;
  height: 40px;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-color);
}

.status-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background-color: var(--bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-secondary);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-tertiary);
  transition: all 0.3s ease;
}

.status-indicator.online .status-dot {
  background-color: var(--success-color);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.persona-details {
  min-width: 0;
}

.persona-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 2px;
}

.persona-status {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-color);
}

.typing-dots {
  animation: bounce 1.4s infinite;
}

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.online-status {
  color: var(--success-color);
}

.offline-status {
  color: var(--text-tertiary);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.more-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  min-width: 150px;
  margin-top: 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: var(--text-primary);
}

.menu-item:hover {
  background-color: var(--bg-tertiary);
}

.menu-item:first-child {
  border-radius: 8px 8px 0 0;
}

.menu-item:last-child {
  border-radius: 0 0 8px 8px;
}

/* 聊天容器 */
.chat-container {
  flex: 1;
  overflow: hidden;
}

/* 聊天输入容器 */
.chat-input-container {
  padding: 16px 24px;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

/* 快速回复 */
.quick-replies {
  padding: 12px 24px 0;
  background-color: var(--bg-secondary);
}

.quick-replies-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.quick-replies-title {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.quick-replies-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-reply-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  color: var(--text-secondary);
}

.quick-reply-item:hover {
  background-color: var(--primary-color-light);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* 聊天设置 */
.chat-settings {
  padding: 20px 0;
}

.setting-group {
  margin-bottom: 24px;
}

.setting-group:last-child {
  margin-bottom: 0;
}

.setting-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.setting-select {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  min-width: 120px;
}

.setting-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* 开关控件 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-tertiary);
  border-radius: 24px;
  transition: 0.3s;
  border: 1px solid var(--border-color);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-primary);
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-input:checked + .toggle-slider {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.toggle-input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background-color: white;
}

/* 文件预览 */
.file-preview {
  padding: 20px 0;
}

.preview-content {
  margin-bottom: 20px;
}

.image-preview {
  text-align: center;
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
}

.file-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background-color: var(--bg-tertiary);
  border-radius: 8px;
}

.file-icon {
  color: var(--text-secondary);
}

.file-details {
  flex: 1;
}

.file-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.file-size,
.file-type {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

.preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式 */
@media (max-width: 768px) {
  .chat-header {
    padding: 12px 16px;
  }

  .header-left {
    gap: 12px;
  }

  .persona-name {
    font-size: 14px;
  }

  .persona-status {
    font-size: 11px;
  }

  .chat-input-container {
    padding: 12px 16px;
  }

  .quick-replies {
    padding: 8px 16px 0;
  }
}

@media (max-width: 480px) {
  .persona-details {
    display: none;
  }

  .header-right {
    gap: 4px;
  }

  .quick-replies-list {
    gap: 6px;
  }

  .quick-reply-item {
    padding: 4px 8px;
    font-size: 11px;
  }
}
</style>
